<template>
  <div>
    <el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="Task" name="Task">
        <TaskDisplay ref="taskRef" :user="currentUser" :task-param="taskParam"/>
      </el-tab-pane>
      <el-tab-pane label="Process" name="Process">
        <ProcessStart ref="processRef"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import TaskDisplay from "@/components/TaskDisplay.vue";
import ProcessStart from "@/components/ProcessStart.vue";
import type { TabsPaneContext } from "element-plus";

const currentUser = ref({ name: "zhangsan", password: "123456" }); // 当前登录用户信息
const taskParam = ref({ candidateGroup: "managers" }); // 任务查询参数

const activeTab = ref("Task");
const taskRef = ref<InstanceType<typeof TaskDisplay> | null>(null);
const processRef = ref<InstanceType<typeof ProcessStart> | null>(null);

function handleTabClick(tab: TabsPaneContext) {
  if (tab.props.label === "Task" && taskRef.value?.refresh) {
    taskRef.value.refresh(); // 调用 TaskDisplay 内的方法刷新数据
  }
  else if (tab.props.label === "Process" && processRef.value?.allProcessInstances) {
    processRef.value.allProcessInstances(); // 调用 ProcessStart 内的方法刷新数据
  }
}
</script>

<style scoped></style>
